<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link th:href="@{/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css?v=4.7.3}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.18.3}" rel="stylesheet"/>
    <link th:href="@{/css/animate.min.css?v=20210831}" rel="stylesheet"/>
    <link th:href="@{/css/style.min.css?v=20210831}" rel="stylesheet"/>
    <link th:href="@{/css/app.css}" rel="stylesheet"/>

    <link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.6}" rel="stylesheet"/>
    <style>

        .redRemark::before {
            content: "* ";
            color: red;
        }

        .register-body {
            width: 62vw;
            height: 44vw;
            margin: 0 auto 5vw;
            background-color: #ffffff;
            position: relative;
        }


        .register-title {
            width: 32vw;
            height: 4vw;
            margin: 0 auto;
            position: relative;
        }

        .register-title p {
            width: 100%;
            height: 1.1vw;
            font-size: 0.9vw;
            line-height: 1.1vw;
            text-indent: .3vw;
            border-left: .2vw solid #1472FF;
            position: absolute;
            bottom: 0;
        }

        .from-group {
            width: 32vw;
            height: 2.15vw;
            margin: 1vw auto;
            clear: both;
            position: relative;
        }

        .control-label {
            width: 8.5vw;
            line-height: 2.15vw;
            font-size: .8vw;
            font-weight: 400;
        }

        .from-group div {
            height: 2.15vw;
            margin-left: -1vw;
        }

        .from-group div input {
            height: 2.15vw;
            font-size: .7vw;
            width: 23.8vw;
        }

        .from-group button, .captchaBox {
            position: absolute;
            right: .5vw;
            top: 0.3vw;
            width: 6vw;
            height: 1.5vw;
            font-size: .7vw;
            border: 0;
            background-color: white;
            border-left: .15vw solid #E5E9EF;
            color: #3184FF;
        }

        .captchaBox {
            position: absolute;
            right: -.7vw;
            top: 0;
            width: 28%;
        }

        .from-group div input::placeholder {
            color: #B6B6B6;
        }

        .form-submit {
            width: 23.8vw;
            height: 2.4vw;
            border: 0;
            background-color: #E3E3E4;
            margin-top: 1vw;
            margin-left: 23.3vw;
            border-radius: .2vw;
            color: #F9F9F9;
            font-size: .8vw;
        }

        .form-submit:hover {
            background-color: #3184FF;
        }

        .error {
            color: red;
        }
    </style>
</head>

<body>
<th:block th:include="include::front-nav"></th:block>
<div class="register-body  con-body-form con-body-form-gr con-body-show">

    <form id="registerForm" class="">
        <div class="register-title">
            <p>账号信息</p>
        </div>
        <div class="from-group">
            <label class="col-sm-3 control-label redRemark">登录账号：</label>
            <div class="col-sm-9">
                <input type="text" name="username" class="form-control valid" placeholder="请输入登录账号" maxlength="11"
                       required>
            </div>
        </div>

        <div class="from-group">
            <label class="col-sm-3 control-label redRemark">登录密码：</label>
            <div class="col-sm-9">
                <input id="password" type="password" name="password" class="form-control valid"
                       placeholder="请输入8~20位字符，必须包含字母、数字和特殊字符" required>
            </div>
        </div>
        <div class="from-group">
            <label class="col-sm-3 control-label redRemark">确认密码：</label>
            <div class="col-sm-9">
                <input type="password" name="rePassword" class="form-control valid" placeholder="请再次输入密码" required>
            </div>
        </div>


        <div class="from-group">
            <label class="col-sm-3 control-label redRemark">图形验证码：</label>
            <div class="col-sm-9">
                <input type="text" name="validateCode" class="form-control valid" placeholder="请输入图形验证码"
                       style="width: 74%" maxlength="6" oninput="value=value.replace(/[^\d]/g,'')">
                <div class="captchaBox">
                    <a href="javascript:void(0);" title="点击更换验证码">
                        <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" height="100%"
                             width="100%"/>
                    </a>
                </div>
            </div>
        </div>

        <button type="button" id="btnSubmit" data-loading="正在注册，请稍后..."
                class="form-submit" onclick="register()">立即注册
        </button>
    </form>
</div>

<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/validate/messages_zh.js?v=1.19.3}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js?v=3.5.1}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.6.0}"></script>

<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<script th:inline="javascript">

    $(function () {
        $('.imgcode').click(function () {
            var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
            $(".imgcode").attr("src", url);
        });
     //   $('.imgcode').click();
    })


    function register() {
        if ($.validate.form('registerForm')) {
            $.modal.loading($("#btnSubmit").data("loading"));
            var username = $.common.trim($("input[name='username']").val());
            var password = $.common.trim($("input[name='password']").val());
            var rePassword = $.common.trim($("input[name='rePassword']").val());
            var validateCode = $("input[name='validateCode']").val();

            //
            if (username.length <= 5) {
                parent.$.modal.alertWarning("用户名长度不能小于5个字符！");
                $.modal.closeLoading();
                return false;
            }
            if (password.length <= 7) {
                parent.$.modal.alertWarning("密码长度不能小于7个字符！");
                $.modal.closeLoading();
                return false;
            }

            if (password != rePassword) {
                parent.$.modal.alertWarning("两次输入的密码不一致，请您重新输入！");
                $.modal.closeLoading();
                return false;
            }


            if (!$.common.charValid(password)) {
                parent.$.modal.alertWarning("密码必须包含字母、数字、以及特殊符号<font color='red'>~!@#$%^&*()-=_+</font>");
                $.modal.closeLoading();
                return false;
            }


            $.ajax({
                type: "post",
                url: ctx + "front/register",
                data: {
                    "username": username,
                    "password": password,
                    "validateCode": validateCode
                },
                success: function (r) {
                console.log(r)
                    if (r.code == web_status.SUCCESS) {
                        // location.href = ctx + 'index';
                        layer.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", {
                                icon: 1,
                                title: "系统提示"
                            },
                            function (index) {
                                //关闭弹窗
                                layer.close(index);
                                location.href = ctx + 'front/login';
                            });

                    } else {
                        $('.imgcode').click();
                     //   $(".code").val("");
                        $.modal.msg(r.msg);
                    }
                    $.modal.closeLoading();
                }
            });
        }
    }
</script>
</body>
</html>
